<template>
  <div class="register-container">
    <div class="top">
      <van-uploader class="avatar" :after-read="afterReadHandler">
        <van-image width="100%" height="100%" :src="form.avatar" fit="cover" v-if="form.avatar" />
        <div class="upload-text" v-else>请上传头像</div>
      </van-uploader>
    </div>

    <div class="card">
      <div class="form-item">
        <van-form ref="formRef" show-error>
          <van-field
            placeholder="请输入昵称"
            :rules="[{ required: true }]"
            size="large"
            type="text"
            v-model="form.nickname"
            autocomplete="off"
          >
            <template #left-icon>
              <div class="icon">
                <van-icon v-model="form.nickname" name="manager-o" size="20" />
              </div>
            </template>
          </van-field>
          <van-field
            placeholder="请输入用户名"
            :rules="[{ required: true }]"
            size="large"
            type="text"
            v-model="form.username"
            autocomplete="off"
          >
            <template #left-icon>
              <div class="icon">
                <van-icon v-model="form.username" name="user-o" size="20" />
              </div>
            </template>
          </van-field>
          <van-field
            placeholder="请输入密码"
            :rules="[{ required: true }]"
            size="large"
            v-model="form.password"
            type="password"
            autocomplete="off"
          >
            <template #left-icon>
              <div class="icon">
                <van-icon v-model="form.password" name="shield-o" size="20" />
              </div>
            </template>
          </van-field>
          <van-field
            placeholder="请输入邮箱"
            :rules="[{ required: true }]"
            size="large"
            v-model="form.email"
            type="email"
            autocomplete="off"
          >
            <template #left-icon>
              <div class="icon">
                <van-icon v-model="form.email" name="envelop-o" size="20" />
              </div>
            </template>
          </van-field>
          <div class="border"></div>
        </van-form>
      </div>
      <div class="button-container">
        <van-button round type="primary" block @click="submitHandler"> 注 册 </van-button>
        <div class="tips">
          <span></span>
          <span @click="router.push('/login')">已有账号？</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { upload } from '@/api'
import { register } from '@/api/user'
import { useRouter } from 'vue-router'
const router = useRouter()
const form = ref({
  nickname: '',
  username: '',
  password: '',
  email: '',
  avatar: '',
})

const formRef = ref(null)

/**上传头像 */
const afterReadHandler = (payload) => {
  showLoadingToast({
    message: '上传中...',
    forbidClick: true,
    overlay: true,
    duration: 0,
  })
  const formData = new FormData()
  formData.append('file', payload.file)
  upload(formData).then((res) => {
    if (res.code === 200) {
      showSuccessToast(res.message)
      form.value.avatar = res.data
    }
  })
}

/**提交 */
const submitHandler = () => {
  formRef.value.validate().then(() => {
    if (form.value.avatar === '') {
      showFailToast('请上传头像')
      return
    }
    register(form.value).then((res) => {
      console.log(res)
      if (res.code === 200) {
        showSuccessToast('注册成功')
        router.push({
          path: '/login',
          query: {
            username: form.value.username,
            password: form.value.password,
          },
        })
      }
    })
  })
}
</script>

<style lang="less" scoped>
.register-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: @default-color;
  .top {
    height: 200px;
    background-color: @default-color;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .avatar {
      width: 120px;
      height: 120px;
      background-color: rgba(179, 179, 179, 0.8);
      border-radius: 50%;
      overflow: hidden;
      font-size: 16px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 4px solid #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .card {
    position: relative;
    margin: 0 auto;
    background: #fff;
    width: 86%;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(218, 235, 254, 0.8);
    padding: 20px 0;
    .form-item {
      .icon {
        margin-right: 10px;
      }
    }
    .button-container {
      padding: 0 20px;
      margin-top: 20px;
      .tips {
        font-size: 14px;
        display: flex;
        padding: 10px 0 0 10px;
        justify-content: space-between;
        color: @text-color-02;
      }
    }
  }
}
</style>
